<template>
  <div class="order-panel">
    <el-row class="order-panel-title">
      <el-col :span="2">ID</el-col>
      <el-col :span="5">商品信息</el-col>
      <el-col :span="4">买家信息</el-col>
      <el-col :span="4">送货方式</el-col>
      <el-col :span="4">支付金额</el-col>
      <el-col :span="1">状态</el-col>
      <el-col :span="4">操作</el-col>
    </el-row>

    <div class="order-panel-content" v-for="item in orderDataList" :key="item.id">
      <div class="order-panel-content-title">
        <div>
          <span>订单号:</span>
          <span style="color:#259B24">{{ item.order_sn }}</span>
        </div>
        <div>
          <span style="font-weight:500">{{ item.create_time }}</span>
        </div>
        <div>
          <el-button type="warning" style="padding:3px 5px;" size="mini"
            v-if="item.status === '1'" @click="takeTheirParams.order_sn = item.order_sn; disTakeTheir = true">更换</el-button>
          <span>自提点</span>
        </div>
        <div>
          <span>姓名：</span>
          <span>{{ item.realname }}</span>
          <span style="font-weight:600">{{ item.leader_phone }}</span>
        </div>
        <div>
          <span>小区：</span>
          <span>{{ item.area_name }}</span>
        </div>
        <div>
          <span>地址：</span>
          <span>{{ item.province }}-{{ item.city }}{{ item.area }}</span>
        </div>
      </div>
      <el-row class="order-panel-content-row">
        <el-col :span="2" class="order-panel-content-col">
          <div>{{ item.id }}</div>
        </el-col>
        <el-col :span="5" class="order-panel-content-col">
          <el-scrollbar :wrapStyle="{height:'120px'}" :viewStyle="{height:'120px'}" :noresize="false">
              <div class="goods-container" v-for="order in item.order" :key="order.goods_id" 
                :style="item.order.lenght>1 ? {'height':'70px','line-height':'70px'} : {'height':'120px','line-height':'120px'}">
                <div style="width:40px">
                  <l-pic :picurl="order.pic_url" :size="{height:40,width:40}" :disdel="false" :disview="false" style="vertical-align: middle;"/>
                </div>               
                <div class="goods-container-info">
                  <div>{{order.name}}</div>
                  <div>
                    <span>￥{{ order.price }}x{{ order.number }}</span>
                    <span>小计:</span>
                    <span style="color:red">￥{{ order.total_price }}</span>
                  </div>
                  <div>
                    <span>规格</span>
                    <span>{{ order.property1_name }}</span>
                    <span>{{ order.property2_name }}</span>
                  </div>
                </div>
              </div>
          </el-scrollbar>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <el-scrollbar :wrapStyle="{height:'120px'}" :viewStyle="{height:'115px'}" :noresize="false">
            <div class="buyer-info" style="line-height:150px">
              <div>
                <span>昵称：</span>
                <span>{{ item.nickname }}</span>
                <span>[{{ item.user_id }}]</span>
              </div>
              <div>
                <span>姓名：</span>
                <span>{{ item.name }}</span>
              </div>
              <div>
                <span>电话：</span>
                <span>{{ item.phone }}</span>
              </div>
              <div>
                <span>地址：</span>
                <span>{{ item.address }}</span>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
            <svg-icon icon-class="快递查询" style="font-size:25px"/>
            <span>{{ item.after_type === '0' ? '到点自提' : '快递' }}</span>
          </div>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <el-scrollbar :wrapStyle="{height:'120px'}" :viewStyle="{height:'115px'}" :noresize="false">
            <div class="price-info">
              <div>
                <span>商品总价：</span>
                <span>{{ item.total_price }}</span>
              </div>
              <div>
                <span>配送费用：</span>
                <span>{{ item.express_price }}</span>
              </div>
              <div>
                <span>订单总价：</span>
                <span>{{ item.total_price }}</span>
              </div>
              <div>
                <span>总优惠：</span>
                <span>0</span>
              </div>
              <div>
                <span>实付金额：</span>
                <span style="color:red">￥{{ item.payment_money }}</span>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
        <el-col :span="1" class="order-panel-content-col">
          <el-button type="success" style="padding:4px 7px;" size="mini">{{ orderStatus(item.status).label }}</el-button>
        </el-col>
        <el-col :span="4" class="order-panel-content-col">
          <el-scrollbar :wrapStyle="{height:'120px'}" :viewStyle="{height:'115px'}" :noresize="false">
            <div style="line-height: 30px;padding:10px 10px">
              <el-button type="primary" plain class="handle-button" 
                v-if="item.status === '1'" @click="sendOut(item.order_sn)">发货</el-button>
              <el-button type="primary" plain class="handle-button" 
                v-if="item.status === '1'" @click="takeTheirParams.order_sn = item.order_sn; disTakeTheir = true">修改自提点</el-button>
              <el-button type="warning" plain class="handle-button" v-if="item.group_admin_remark === ''" 
                @click="openRemarkPanle(item.group_admin_remark,item.order_sn)">备注</el-button>
              <el-badge value="注" v-else style="margin-top:10px;margin-right:40px">
                <el-button type="success" class="handle-button" @click="openRemarkPanle(item.group_admin_remark,item.order_sn)">已备注</el-button>
              </el-badge>
              <el-button type="danger" plain class="handle-button" @click="refundAffirm(item)">一键退款</el-button>
              <el-button type="success" plain class="handle-button">打印小票</el-button>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
    
    <!-- 备注面板 -->
    <el-dialog title="备注" :visible.sync="disRemark" width="500px">
      <div>
        <el-input type="textarea" v-model="remarkParams.remark" :autosize="{ minRows: 5, maxRows: 20 }" placeholder="请输入备注"></el-input>
        <div style="margin-top:15px;text-align:center">
          <el-button type="primary" style="padding: 10px 25px" @click="sendRemark">提交</el-button>
        </div>        
      </div>
    </el-dialog>

    <!-- 自提点面板 -->
    <el-dialog :visible.sync="disTakeTheir" width="40%" title="选择自提点">
      <take-their @selectRowData="sendTakeTheir"/>
    </el-dialog>
  </div>
</template>

<script>
import LPic from '@/components/lPic';
import TakeTheir from './TakeTheir'
import { putOrderStatus, putOrderRemark, putOrderRefund, putOrderLeader } from '@/api/order'

export default {
  name: 'OrderPanel',
  components: {
    LPic,
    TakeTheir
  },
  props: {
    name: {
      type: String,
      required: false,
      default: ''
    },
    orderDataList: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      status: [
        { label: '未选定', key: '-1' },
        { label: '待付款', key: '0' },
        { label: '待发货', key: '1' },
        { label: '已取消', key: '2' },
        { label: '已发货', key: '3' },
        { label: '已退款', key: '4' },
        { label: '退款中', key: '5' },
        { label: '待评价', key: '6' },
        { label: '已完成', key: '7' },
        { label: '已删除', key: '8' },
        { label: '一键退款', key: '9' },
        { label: '拼团中', key: '11' },
      ],
      disRemark: false,//打开参数面板
      remarkParams: { //提交的备注参数
        remark: '',
        order_sn: '',
        key: this.$store.state.app.activeApp.saa_key
      },
      disTakeTheir: false,//打开自提点面板
      takeTheirParams: { //修改自提点的参数
        leader_uid: '',
        order_sn: '',
        key: this.$store.state.app.activeApp.saa_key
      }
    }
  },
  methods: {
    /**
     * 发货
     */
    sendOut(orderSn) {
      const params = { order_sn: orderSn, key: this.$store.state.app.activeApp.saa_key }
      putOrderStatus(params).then(response => {
        if(response.status === 200){
          this.$message.success('发货成功');
          this.$emit('sendOut');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 打开备注面板
     */
    openRemarkPanle(remark,orderSn) {
      this.disRemark = true; 
      this.remarkParams.remark = remark; 
      this.remarkParams.order_sn = orderSn;
    },
    /**
     * 添加修改备注
     */
    sendRemark() {
      if(this.remarkParams.remark.trim() === ''){
        this.$message.error('备注内容不可为空，请填写备注！');
        return;
      }
      putOrderRemark(this.remarkParams).then(response => {
        if(response.status === 200){
          this.$message.success('保存备注成功！');
          this.disRemark = false;
          this.$emit('sendRemark')
        }else{
          this.$message.error(response.message)
        }
      })
    },
    /**
     * 退款确认
     */
    refundAffirm(data) {
      this.$confirm('一键退款可能引起买家投诉，请协商后谨慎操作','一键退款',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const parmas = { id: data.id, key: this.$store.state.app.activeApp.saa_key };
        putOrderRefund(parmas).then(response => {
          if(response.status === 200){
            this.$message.success('退款成功！');
            this.$emit('sendRefund');
          }else{
            // this.$message.error(response.message);
          }
        })
        
      }).catch(() => {
        this.$message.error('取消')
      })
    },
    /**
     * 获取选中的自提点的信息
     */
    sendTakeTheir(data) {
      this.takeTheirParams.leader_uid = data.uid;
      putOrderLeader(this.takeTheirParams).then(response => {
        if(response.status === 200){
          this.disTakeTheir = false;
          this.$message.success('修改成功！');
          this.$emit('sendTakeTheir');
        }else{
          this.$$message.error(response.message)
        }
      })
    },
    /**
     * 订单状态
     */
    orderStatus(status){
      const os = this.status.find(item => item.key === status)
      return os === undefined ? { label: '' } : os;
    }
  },
}
</script>

<style lang="scss" scoped>
.order-panel{
  border-bottom: 1px solid #B3E2FF; 
  &-title{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #F2F2F2F2;
  }
  &-content{
    &-title{
      height: 40px;
      width: 100%;
      line-height: 40px;
      border: 1px solid #B3E2FF;
      box-sizing: border-box;
      padding: 0 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      background-color: #F0F8FF;
      &>div{
        display: inline-block;
        padding: 0 5px;
      }
    }
    &-row{
      padding: 10px 0; 
      text-align: center;
      height: 120px;
      line-height: 120px;
    }
    &-col{
      padding: 0 5px;
    }
  }
}
.goods-container{
  &>div{
    display: inline-block;
  }
  &-info{
    line-height: normal;
    vertical-align: middle;
    width: -webkit-calc(100% - 45px);
    width: -moz-calc(100% - 45px);
    width: calc(100% - 45px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &>div{
      padding:2px 0;
    }    
  }
}
.buyer-info{
  padding: 5px 10px;
  &>div{
    line-height: normal;
    text-align: left;
  }
}
.price-info{
  padding: 5px 10px;
  &>div{
    line-height: normal;
    text-align: left;
  }
}
.handle-button{
  padding: 3px 5px;
}
</style>